<template>
  <el-row>
    <!-- 机构概述 -->
    <el-col :span="14">
      <el-card class="box-card card-body">
        <p>机构概述</p>
        <div class="content">
          <div class="left-content">
            <div class="name">{{ organoverview.organName }}</div>
            <div class="address">地址：{{ organoverview.organAddress }}</div>
            <div class="duty-people">负责人：{{ organoverview.principal }} {{ organoverview.phone
            }}</div>
            <el-button @click="show=true">查看营业部分布</el-button>
          </div>
          <div class="right-content">
            <div class="item">
              <div>
                <div class="label">分拣中心（个）</div>
                <div class="num" @click="$router.push('/data/OrgManage')">{{ organoverview.sortingCenterNumber }}</div>
              </div>
            </div>
            <div class="item">
              <div>
                <div class="label">营业部（个）</div>
                <div class="num" @click="$router.push('/data/OrgManage')">{{ organoverview.agencyNumber }}</div>
              </div>
            </div>
            <div class="item">
              <div>
                <div class="label">司机人数（个）</div>
                <div class="num" @click="$router.push('/driver-manage')">{{ organoverview.driverNumber }}</div>
              </div>
            </div>
            <div class="item">
              <div>
                <div class="label">快递员人数（个）</div>
                <div class="num" @click="$router.push('/delivery-manage')">{{ organoverview.courierNumber }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <!-- 今日数据 -->
    <el-col :span="10">
      <el-card class="box-card card-body">
        <div class="header">
          <p>今日数据</p>
          <div class="el-icon-refresh" @click="nowTime">{{ time }}</div>
        </div>
        <div class="content">
          <el-row class="info">
            <el-col :span="8">
              <div class="label">订单金额（元）</div>
              <div class="value">{{ todaydata.orderAmount }}</div>
              <div class="update">较昨日 +{{ todaydata.orderAmountChanges }}<i class="el-icon-caret-top" /></div>
            </el-col>
            <el-col :span="8">
              <div class="label">订单数量（笔）</div>
              <div class="value">{{ todaydata.orderNumber }}</div>
              <div class="update">较昨日 +{{ todaydata.orderNumberChanges }}<i class="el-icon-caret-top" /></div>
            </el-col>
            <el-col :span="8">
              <div class="label">运输任务（次）</div>
              <div class="value">{{ todaydata.transportTaskNumber }}</div>
              <div class="update">较昨日 +{{ todaydata.transportTaskNumberChanges }}<i class="el-icon-caret-top" /></div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
    <el-dialog
      class="body"
      width="800px"
      :visible.sync="show"
    >
      <div class="el-icon-close btn" @click="show=false" />
      <img src="@/assets/assets/map.png" alt="">
    </el-dialog>
  </el-row>
</template>

<script>
export default {
  props: {
    organoverview: {
      type: [Object],
      default: function() { return [] }
    },
    todaydata: {
      type: [Object],
      default: function() { return [] }
    }
  },
  data() {
    return {
      time: '',
      show: false
    }
  },
  async created() {
    this.nowTime()
  },
  methods: {
    nowTime() {
      const timestamp = (new Date()).valueOf()
      const time = new Date(timestamp)
      const year = time.getFullYear()
      const month = time.getMonth() + 1
      const day = time.getDate()
      const hour = time.getHours()
      const minute = time.getMinutes()
      this.time = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute)
      // console.log(this.time)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col{
  display: flex;
  flex-direction: column;
  padding: 0 12px;
}
.el-card{
 box-shadow: 0 0px 0px 0;
}
.el-card__body{
  padding: 23px 20px;
}
.el-col-10{
  .el-card__body{
    padding: 21px 20px 23px;
  }
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  .el-icon-refresh{
    font-size: 14px;
    color: #818693;
    cursor: pointer;
  }
  .el-icon-refresh::before{
    font-size: 15px;
    color: #e15536;
    margin-right: 8px;
  }
}
p{
  margin:0 0 16px;
  font-size: 16px;
  font-weight: 700;
}
.content{
  display: flex;
  width: 100%;
  height: 154px;
  .info{
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-top: 16px;
    padding-left: 10px;
    .label{
      font-size: 14px;
      color: #20232a;
      margin-bottom: 21px;
      text-align: center;
    }
    .value{
      font-size: 36px;
      color: #20232a;
      font-weight: 700;
      margin-bottom: 24px;
      text-align: center;
    }
    .update{
      font-size: 14px;
      color: #818693;
      margin-bottom: 20px;
      padding-left: 9px;
      text-align: center;
      .el-icon-caret-top{
        width: 15px;
        height: 15px;
        color: #e15536;
      }
    }
  }
  .left-content{
    flex: 50%;
    padding-left: 10px;
    border-right: 1px solid #ebeef5;
    .name{
      font-size: 16px;
      margin-top: 20px;
      margin-bottom: 13px;
    }
    .address{
      font-size: 14px;
      color: #818693;
      margin-bottom: 8px;
    }
    .duty-people{
      font-size: 14px;
      color: #818693;
      margin-bottom: 23px;
    }
  }
  .right-content{
    flex: 50%;
    display: flex;
    flex-wrap: wrap;
    .item{
      background-color: #fff;
      flex: 50%;
      height: 85px;
      display: flex;
      align-items: center;
      flex-direction: column;
      .label{
        font-size: 14px;
        margin-bottom: 10px;
      }
      .num{
        font-size: 32px;
        font-weight: 700;
        color: #e15536;
        cursor: pointer;
      }
    }
  }
  .el-button{
    font-size: 14px;
    color: #e15536;
    width: 158px;
    height: 40px;
    background-color: #ffeeeb;
    border: 1px solid #f3917c;
    border-radius: 4px;
  }
}
</style>
<style lang="scss">
.el-card__body{
  padding: 23px 20px;
}
.el-col-10{
  .el-card__body{
    padding: 23px 20px 23px;
  }
}
.el-dialog__header{
    display: none;
}
.el-dialog__body{
    padding: 0;
    position: relative;
    .btn{
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        right: 18px;
        top: 15px;
    cursor: pointer;
    }
    img{
        width: 800px;
        height: 600px;
    }
}
</style>
